<template>
	<view class="groupactive">
		<image v-if="info.pic" class="groupactive_top_img" :src="picUrl+info.pic" mode="aspectFill"></image>
		<view class="pd-30">
			<view class="f-18">
				<span style="vertical-align: middle;">{{info.title}}</span>
				<image class="active_status_img" v-if="info.huodong_status==0" :src="onlinePic+'active_face.png'">
				</image>
				<image class="active_status_img" v-if="info.huodong_status==1" :src="onlinePic+'active_ing.png'">
				</image>
				<image class="active_status_img" v-if="info.huodong_status==2" :src="onlinePic+'active_end.png'">
				</image>
			</view>
			<view class="groupactiveinfo_content_cell">
				<view class="groupactiveinfo_content_text">
					<text>{{info.desc?info.desc:info.content[0].text}}</text>
				</view>
			</view>
			<view class="display_flex mt-15">
				<view class="display_flex flex-1" v-if="info.club_logo">
					<view class="groupactive_user_avatar_box">
						<image class="groupactive_user_avatar" :src="picUrl+info.club_logo"></image>
						<image v-if="info.club_border" class="group_border_img" :src="picUrl+info.club_border"
							mode="aspectFill"></image>
					</view>
					<view class="c-999999 ml-10 f-12">{{info.club_title}}</view>
				</view>
				<view class="group_public_btn_mini f-14" v-if="info.huodong_status==1&&!auditinfo.status"
					@click="goActiveInfo">活动报名</view>
				<view class="group_public_btn_mini f-14" v-if="auditinfo.status==1" @click="goActiveTicket">查看门票</view>
			</view>
			<view class="lineh"></view>
			<view class="display_flex mt-15">
				<view class="flex-1 f-18 f-w">热爱·车友分享</view>
				<view class="f-12 c-999999">{{total}}条帖子</view>
			</view>
			<view class="mt-20">
				<uni-row :gutter="20">
					<uni-col :span="12" v-for="(item,index) in list" :key="item.card_id">
						<view class="groupinfo_cell_box">
							<view class="groupinfo_cell" @click="goInfo(item.card_id)">
								<view class="group_cell_img_box">
									<image class="group_cell_img"
										:src="item.cover?picUrl+item.cover:picUrl+item.image[0]" mode="aspectFill">
									</image>
								</view>
								<view class="groupinfo_text">
									<view class="groupinfo_title ellipsis-2">{{item.title}}</view>
									<view class="display_flex mt-10 c-999999 f-12">
										<view>
											<image class="pic_icon_img" :src="onlinePic+'pic_icon.png'"></image>
											<span class="ml-5">{{item.image.length}}</span>
										</view>
										<view class="ml-15">
											<image class="read_icon_img" :src="onlinePic+'read_icon.png'"></image>
											<span class="ml-5">{{item.show_num}}</span>
										</view>
									</view>
								</view>
							</view>
						</view>
					</uni-col>
				</uni-row>
			</view>
			<view v-if="loadingTitle" class="page_bottom_loading" style="padding-bottom:50rpx;">{{loadingTitle}}</view>
		</view>
		<view class="index_post_box" @click="goPost">
			<image class="index_post_img" :src="onlinePic+'post.png'"></image>
		</view>

	</view>
</template>

<script>
	import {
		getClubCardsList,
		getGroupActiveInfo,
		getUserGroupActiveAuditInfo
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				info: '',
				auditinfo: '',
				params: {
					top: 0,
					page: 1,
					size: 10,
					huodong_id: ''
				},
				list: [],
				total: '',
				channel: '',
				club_id: '',
				loadingTitle: '',
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			if (uni.getStorageSync('onloadbbs') || uni.getStorageSync('onload')) {
				this.list = []
				this.params.page = 1
				this.userinfo = uni.getStorageSync('userinfo')
				this.getGroupActiveInfo()
				this.getUserGroupActiveAuditInfo()
				this.getClubCardsList()
				uni.removeStorage({
					key: 'onloadbbs'
				})
				uni.removeStorage({
					key: 'onload'
				})
			}
		},
		onLoad(options) {
			this.params.huodong_id = options.huodong_id ? options.huodong_id : ''
			this.huodong_id = options.huodong_id ? options.huodong_id : ''
			this.club_id = options.club_id ? options.club_id : ''
			this.channel = options.channel ? options.channel : ''
			this.getGroupActiveInfo()
			this.getUserGroupActiveAuditInfo()
			this.getClubCardsList()
		},
		methods: {
			getGroupActiveInfo() {
				getGroupActiveInfo({
					huodong_id: this.huodong_id
				}).then(res => {
					if (res.state == 1) {
						this.info = res.data.info
						var params = {
							event_code: '车友会活动详情',
							path: 'pages/group/groupactive',
							event_id: this.huodong_id,
							title: res.data.info.title,
							source_page: '',
							value: this.channel ? this.channel : '',
						}
						app.BurialPoint(params)
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getUserGroupActiveAuditInfo() {
				getUserGroupActiveAuditInfo({
					huodong_id: this.huodong_id,
					channel: this.channel ? this.channel : ''
				}).then(res => {
					if (res.state == 1) {
						this.auditinfo = res.data.info
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getClubCardsList() {
				getClubCardsList(this.params).then(res => {
					if (res.state == 1) {
						this.list = [...this.list, ...res.data.data]
						this.current_page = res.data.current_page
						this.last_page = res.data.last_page
						this.total = res.data.total
						if (this.list.length == 0) {
							this.loadingTitle = "- 暂无更多 -"
						}
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			goPost() {
				if (uni.getStorageSync('access_token')) {
					uni.navigateTo({
						url: '/pages/bbs/bbspost?huodong_id=' + this.huodong_id + '&huodong_title=' + this.info
							.title + '&club_id=' + this.info.club_id
					})
					var params = {
						event_code: '车友会活动详情',
						path: 'pages/group/groupactiveinfo',
						event_id: this.info.huodong_id,
						title: this.info.title,
						source_page: '车友会活动详情-发帖',
						value: '',
					}
					app.BurialPoint(params)
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			goInfo(card_id) {
				uni.navigateTo({
					url: '/pages/bbs/bbsinfo?card_id=' + card_id
				})
			},
			goActiveInfo() {
				uni.navigateTo({
					url: '/pages/group/groupactiveinfo?huodong_id=' + this.huodong_id + '&club_id=' + this
						.club_id + '&channel=' + this
						.channel
				})
			},
			goActiveTicket() {
				uni.navigateTo({
					url: '/pages/group/groupactiveaudit?huodong_id=' + this.huodong_id + '&club_id=' + this
						.club_id + '&channel=' + this
						.channel
				})
			}
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.list = []
			this.getGroupActiveInfo()
			this.getClubCardsList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.current_page < this.last_page) {
				this.showLoading = true
				this.params.page = this.params.page + 1
				this.getClubCardsList()
			} else {
				this.showLoading = false
				if (this.list.length > 0) {
					this.loadingTitle = "- 已经到底了 -"
				} else {
					this.loadingTitle = "- 暂无更多 -"
				}

			}
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: this.info.title,
				imageUrl: this.info.pic ? this.picUrl + this.info.pic : ''
			}
		}
	}
</script>

<style lang="scss">
	.groupactive {

		.groupactive_top_img {
			width: 100%;
			max-height: 370rpx;
			vertical-align: middle;
		}

		.active_status_img {
			width: 98rpx;
			height: 34rpx;
			margin-left: 20rpx;
			vertical-align: middle;
		}

		.groupactiveinfo_content_cell {
			font-size: 28rpx;
			margin-top: 20rpx;

			.groupactiveinfo_content_img {
				width: 100%;
				vertical-align: middle;
				border-radius: 8rpx;
			}

			.groupactiveinfo_content_text {
				color: #000000;
				margin: 20rpx 0;
				line-height: 48rpx;
			}
		}

		.groupactive_user_avatar_box {
			width: 50rpx;
			height: 50rpx;
			position: relative;

			.groupactive_user_avatar {
				width: 50rpx;
				height: 50rpx;
				border-radius: 8rpx;
				vertical-align: middle;
			}

			.group_border_img {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 1;
				vertical-align: middle;
			}
		}


		.groupinfo_cell_box {

			.groupinfo_cell {
				margin-bottom: 25rpx;

				.group_cell_img_box {
					width: 100%;
					height: 350rpx;
					position: relative;
				}

				.group_cell_img {
					width: 100%;
					height: 350rpx;
					border-radius: 8rpx;
				}


				.groupinfo_text {
					padding: 15rpx 0;

					.groupinfo_title {
						min-height: 80rpx;
						flex: 1;
						font-size: 26rpx;
						font-weight: bold;
						line-height: 40rpx;
						letter-spacing: 1rpx;
						// display: flex;
						// align-items: center;
					}

					.pic_icon_img {
						width: 27rpx;
						height: 22rpx;
						vertical-align: middle;
					}

					.read_icon_img {
						width: 34rpx;
						height: 24rpx;
						vertical-align: middle;
					}
				}
			}
		}
	}
</style>